<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>导航条</title>
        <link rel="stylesheet" href="./css/reset.css" />
        <style>
            body {
                height: 3000px;
            }

            /* 设置nav的大小 */
            .nav {
                /* 设置宽度和高度 */
                width: 1210px;
                height: 48px;
                /* 设置背景颜色 */
                background-color: #e8e7e3;

                margin: 100px auto;

                /* 
                粘滞定位
                    - 当元素的position属性设置为sticky时则开启了元素的粘滞定位
                    - 粘滞定位和相对定位的特点基本一致，
                        不同的是粘滞定位可以在元素到达某个位置时将其固定
             */

                position: sticky;
                /* 设置固定距离,参考视口 */
                top: 10px;
            }

            /* 设置nav中li */
            .nav li {
                /* 设置li向左浮动，已使菜单横向排列 */
                float: left;
                /* 设置li的高度 */
                /* height: 48px; */
                /* 将文字在父元素中垂直居中 */
                line-height: 48px;
            }

            /* 设置a的样式 */
            .nav a {
                /* 将a转换为块元素 */
                display: block;
                /* 去除下划线 */
                text-decoration: none;
                /* 设置字体颜色 */
                color: #777777;
                /* 修改字体大小 */
                font-size: 18px;

                padding: 0 39px;
            }

            .nav li:last-child a {
                padding: 0 42px 0 41px;
            }

            /* 设置鼠标移入的效果 */
            .nav a:hover {
                background-color: #3f3f3f;
                color: #e8e7e3;
            }
        </style>
    </head>

    <body>
        <!-- 创建导航条的结构 -->
        <ul class="nav">
            <li>
                <a href="#">HTML/CSS</a>
            </li>
            <li>
                <a href="#">Browser Side</a>
            </li>
            <li>
                <a href="#">Server Side</a>
            </li>
            <li>
                <a href="#">Programming</a>
            </li>
            <li>
                <a href="#">XML</a>
            </li>
            <li>
                <a href="#">Web Building</a>
            </li>
            <li>
                <a href="#">Reference</a>
            </li>
        </ul>
    </body>
</html>
